import React, { Component } from 'react';
import Storage from '../model/storage'

class TodoList2 extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list: [
                {
                    title: '录制ionic',
                    checked: true
                },
                {
                    title: '录制nodejs',
                    checked: false
                },
                {
                    title: '录制eggjs',
                    checked: true
                },
                {
                    title: '录制vue',
                    checked: false
                }
            ]
         }
    }

    componentDidMount() {
        const list = Storage.get('todoList')
        console.log(list)
        if(list) {
            this.setState({
                list: list
            })
        }
    }

    addData = (e)=> {
        if(e.keyCode === 13) {
            let title = e.target.value
            let tempList = this.state.list
            tempList.push({
                title: title,
                checked: false
            })
            this.refs.title.value = ''
            this.setState({
                list: tempList
            })

            Storage.set('todoList',tempList)
        }
    }

    toggleChecked = (idx) => {
        let tempList = this.state.list
        tempList[idx].checked = !tempList[idx].checked
        this.setState({
            list: tempList
        })
        Storage.set('todoList',tempList)
    }

    deleteItem(idx) {
        let tempList = this.state.list
        tempList.splice(idx,1)
        this.setState({
            list: tempList
        })
        Storage.remove('todoList')
    }

    render() { 
        return ( 
            <div>
                <input ref="title" type="text" onKeyDown={this.addData}/>
                <h2>待办事项</h2>
                <br/>

                <h2>待完成</h2>
                {
                    this.state.list.map((value,key) => {
                        if(!value.checked) {
                            return (
                                <p key={key}>
                                    <input type="checkbox" checked={value.checked} onChange={() => this.toggleChecked(key)}/>{value.title}
                                    <button onClick={this.deleteItem.bind(this,key)}>删除</button>
                                </p>
                            )
                        }
                    })
                }
                <h2>已完成</h2>
                {
                    this.state.list.map((value,key) => {
                        if(value.checked) {
                            return (
                                <p key={key}>
                                    <input type="checkbox" checked={value.checked} onChange={() => this.toggleChecked(key)}/>{value.title}
                                    <button onClick={this.deleteItem.bind(this,key)}>删除</button>
                                </p>
                            )
                        }
                    })
                }
            </div>
         );
    }
}
 
export default TodoList2;